<template>
  <el-tree style="max-width: 300px" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>
  
<script  setup>
import { List } from 'echarts';
import { toRefs } from 'vue';

const handleNodeClick = (data) => {
  console.log(data)
}

const props = defineProps({
  data: {
    type: List,
  },
})

const { data } = toRefs(props);

const defaultProps = {
  children: 'children',
  label: 'label',
}
//  懒加载
// const loadNode = async (node, resolve) => {
//   if (node.level === 0) {
//     return resolve([{ name: 'region' }])
//   }
//   if (node.level > 1) return resolve([])

//   setTimeout(() => {
//     const data = [
//       {
//         name: 'leaf',
//         leaf: true,
//       },
//       {
//         name: 'zone',
//       },
//     ]

//     resolve(data)
//   }, 500)
// }
</script>
  